<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>天地图实现画点、线、面及编辑功能</title>
    <script
      src="https://api.tianditu.gov.cn/api?v=4.0&tk=f505b3da1a842af3402bd5df887b1be9&plugin=AMap.PolyEditor"
      type="text/javascript"
    ></script>
    <script
      src="http://lbs.tianditu.gov.cn/js/lib/d3/d3.min.js"
      charset="utf-8"
    ></script>
    <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js"></script>
    <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/CarTrack.js"></script>
    <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/data/point.js"></script>
    <style>
      #map {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
      }
      .line-btn {
        width: 100px;
        height: 100%;
        position: fixed;
        top: 0;
        left: 10px;
        z-index: 8;
      }
      .operate,
      .btn {
        width: 100px;
        height: 40px;
        background: #447bf3;
        color: #fff;
        float: left;
        display: block;
        line-height: 40px;
        margin: 10px 0;
        text-align: center;
        border-radius: 100px;
        cursor: pointer;
      }
      .btn {
        background: #f36d44;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div class="line-btn">
      <div class="operate" onclick="openMarkerTool()">点</div>
      <div class="operate" onclick="openPolylineTool()">线</div>
      <div class="operate" onclick="openPolygonTool()">面</div>
      <div class="btn" onclick="editClick()">编辑</div>
      <div class="btn" onclick="saveClick()">保存</div>
      <div class="btn" onclick="clearClick()">清除</div>
    </div>
    <script>
      var map,
        zoom = 10,
        handler;
      let isEdit = false; // 是否启用编辑
      let pointOriginalArr = [[120.2536, 30.27093]]; // 点原始数组
      let lineOriginalArr = [
        [
          [119.86084, 30.41702],
          [119.96796, 30.47353],
          [119.98718, 30.36758],
        ],
        [
          [119.91714, 30.1855],
          [120.10666, 30.27923],
        ],
      ]; // 线原始数组
      let polygonOriginalArr = [
        [
          [119.5752, 30.35392],
          [119.72488, 30.35273],
          [119.65347, 30.26025],
        ],
        [
          [120.49118, 30.29109],
          [120.70541, 30.30532],
          [120.50629, 30.20211],
          [120.69855, 30.22703],
        ],
      ]; // 面原始数组

      //初始化地图对象
      map = new T.Map("map");
      //设置显示地图的中心点和级别
      map.centerAndZoom(new T.LngLat(120.216329, 30.252589), zoom);
        map.setMapType(TMAP_HYBRID_MAP);
      // 如果一进来地图就需要回显
      showPoint();
      showPolyLine();
      showPolygon();

      function showPoint() {
        let pointArr = [];
        pointOriginalArr.forEach((item, index) => {
          let arr = [];
          arr.push(new T.LngLat(item[0], item[1]));
          pointArr.push(arr);
        });
        console.log("pointArr", pointArr);

        pointArr.forEach((item, index) => {
          var marker = new T.Marker(
            item[0]
            // , {
            //   icon: new T.Icon({
            //     // iconUrl: "../images/point.png",
            //     iconSize: new T.Point(24, 28), // 图标可视区域的大小
            //   }),
            // }
          );
          map.addOverLay(marker);
          if (!isEdit) return;
          marker.enableDragging();
          marker.addEventListener("dragend", function (e) {
            updatePointOriginalList([e.lnglat.lng, e.lnglat.lat], index);
          });
        });
      }
      // 更新点位数据，用于最后保存
      function updatePointOriginalList(arr, index) {
        pointOriginalArr[index] = arr;
      }
      function showPolyLine() {
        let lineArr = [];
        lineOriginalArr.forEach((item, index) => {
          let arr = [];
          item.forEach((item1) => {
            arr.push(new T.LngLat(item1[0], item1[1]));
          });
          lineArr.push(arr);
        });
        lineArr.forEach((item, index) => {
          var line = new T.Polyline(item, {
            color: "#ff0000",
            weight: 5,
          });
          map.addOverLay(line);
          if (!isEdit) return;
          line.enableEdit();
          line.addEventListener("edit", function (e) {
            const ht = line.getLngLats();
            let arr = [];
            ht.forEach((item, index) => {
              arr.push([item.lng, item.lat]);
            });
            updateLineOriginalList(arr, index);
          });
        });
      }
      // 更新线的数据，用于最后保存
      function updateLineOriginalList(arr, index) {
        lineOriginalArr[index] = arr;
      }
      function showPolygon() {
        let polygonArr = [];
        polygonOriginalArr.forEach((item, index) => {
          let arr = [];
          item.forEach((item1) => {
            arr.push(new T.LngLat(item1[0], item1[1]));
          });
          polygonArr.push(arr);
        });
        polygonArr.forEach((item, index) => {
          var polygon = new T.Polygon(item, {
            color: "#ff0000",
            weight: 5,
          });
          map.addOverLay(polygon);
          if (!isEdit) return;
          polygon.enableEdit();
          polygon.addEventListener("edit", function (e) {
            // 注意这里用的是数组的第1项
            const ht = polygon.getLngLats()[0];
            let arr = [];
            ht.forEach((item, index) => {
              arr.push([item.lng, item.lat]);
            });
            updatePolygonOriginalList(arr, index);
          });
        });
      }
      // 更新面的数据，用于最后保存
      function updatePolygonOriginalList(arr, index) {
        polygonOriginalArr[index] = arr;
      }

      // 打点
      function openMarkerTool() {
        if (handler) handler.close();
        handler = new T.MarkTool(map, {
          follow: true,
          icon: new T.Icon({
            iconUrl: "../images/point.png",
            iconSize: new T.Point(24, 28), // 图标可视区域的大小
          }),
        });
        handler.open();
        handler.addEventListener("mouseup", function (e) {
          // 这里可以获取到当前点位的坐标
          pointOriginalArr.push([e.currentLnglat.lng, e.currentLnglat.lat]);
          // 画完之后重新绘制，不然编辑不了
          showPoint();
          handler.clear();
        });
      }

      // 画线
      function openPolylineTool() {
        if (handler) handler.close();
        handler = new T.PolylineTool(map, {
          color: "#ff0000",
          weight: 3,
        });
        handler.open();
        handler.addEventListener("draw", function (e) {
          console.log("228========画面", e, e.currentLnglats);
          const currentLnglats = e.currentLnglats;
          let arr = [];
          currentLnglats.forEach((item, index) => {
            arr.push([item.lng, item.lat]);
          });
          lineOriginalArr.push(arr);
          // 画完之后重新绘制，不然编辑不了
          showPolyLine();
          handler.clear();
        });
      }

      // 画面
      function openPolygonTool() {
        if (handler) handler.close();
        handler = new T.PolygonTool(map, {
          color: "#ff0000",
          weight: 3,
        });
        handler.open();
        handler.addEventListener("draw", function (e) {
          const currentLnglats = e.currentLnglats;
          let arr = [];
          currentLnglats.forEach((item, index) => {
            arr.push([item.lng, item.lat]);
          });
          polygonOriginalArr.push(arr);
          // 画完之后重新绘制，不然编辑不了
          showPolygon();
          handler.clear();
        });
      }
      // 点击编辑，保存和清除

      function editClick() {
        isEdit = true;
        map.clearOverLays();
        showPoint();
        showPolyLine();
        showPolygon();
      }
      function saveClick() {
        isEdit = false;
        map.clearOverLays();
        showPoint();
        showPolyLine();
        showPolygon();
        console.log(
          "saveClick========",
          pointOriginalArr,
          lineOriginalArr,
          polygonOriginalArr
        );
      }
      function clearClick() {
        isEdit = false;
        map.clearOverLays();
        pointOriginalArr = [];
        lineOriginalArr = [];
        polygonOriginalArr = [];
      }
    </script>
  </body>
</html>
